<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <script src="https://cdn.staticfile.org/vue/3.3.4/vue.global.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-plus/2.3.14/theme-chalk/index.min.css">
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-plus/2.3.14/index.full.min.js"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>

</head>
<body>
<div id="app">
    <!-- 使用 el-icon 为 SVG 图标提供属性 -->

            <el-icon style="vertical-align: middle"  color="#ff0000">
                <Edit/>
            </el-icon>编辑
            <!-- 或者独立使用它，不从父级获取属性 -->



    <hr>
    <hr>
    <el-icon :size="30"><Share /></el-icon>
    <el-icon :size="50"><Delete /></el-icon>
    <el-icon :size="30"><Delete /></el-icon>
    <hr>
    <el-icon class="is-loading">
        <Loading />
    </el-icon>

    <el-button type="primary">
        <el-icon>
            <Search />
        </el-icon>
        <span > Search </span>
    </el-button>
    <hr>
    <el-icon><Watermelon /></el-icon>
    <el-icon><Sugar /></el-icon>
    <el-icon><Food /></el-icon>
</div>
<script>
  let app = Vue.createApp({
        data() {
            return {
                message: "Hello Element Plus",
            };
        },
    });


  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
  }

  app.use(ElementPlus).mount("#app");
</script>
</body>
</html>